<template>
  <div class="container">
    <mt-header fixed title="行程详情">
      <router-link :to="{name:'index'}" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <div class="detail_post">
      <img :src="project.displayImgUrl" />
    </div>
    <div class="detail_title border-bottom">
     <p>{{project.projectName}}</p>
    </div>
    <div class="detail_summary border-bottom">
      <div class="detail_summary_desciption">
          <div class="weui-cells__title"><i class="detail-zone"></i>线路景点：</div>
          <div class="weui-cells weui-cells_checkbox" v-for="option in project.scenicZones">
              <label class="weui-cell weui-check__label" >
                  <!--div class="weui-cell__hd">
                      <input type="checkbox" class="weui-check" :id="option.id" :value="option.scenicId" v-model="book.scenicZonesId">
                      <i class="weui-icon-checked"></i>
                  </div-->
                  <div class="weui-cell__bd">
                      <p>{{option.scenicZoneName}}</p>
                  </div>
              </label>
              <div class="weui-cell" v-if="option.remark"><p class=" detail-zone-remark">{{option.remark}}</p></div>
          </div>
      </div>
      <div class="detail_summary_desciption"><p>{{project.projectDesc}}</p></div>
    </div>
    <div class="detail_images">
      <ul v-for="images in project.introImages">
        <li><img :src="images.introImageUrl"/></li>
      </ul>
    </div>
    <!-- TODO: make this button unvisible if the user is not admin-->
    <div class="tourist_signup">
      <a class="weui-btn" @click="this.handleTakePartIn">我要报名</a>
    </div>
    <div class="pages-popup">
        <mt-popup
          v-model="sheetVisible"
          popup-transition="popup-fade"
          position="bottom"
          class="popup-takepart">
            <div class="weui-cells weui-cells_form">
              <div class="weui-cell back-btn">
                <a class="mintui mintui-back" @click="this.handleTakePartOut"></a>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd">
                  <label class="weui-label">姓名</label>
                </div>
                <div class="weui-cell__bd">
                  <input class="weui-input" type="text" placeholder="请输入姓名" v-model.lazy="book.contactName" @input="this.handleCheckContent">
                </div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd">
                  <label class="weui-label">手机号</label>
                </div>
                <div class="weui-cell__bd">
                   <input class="weui-input" type="hidden"  v-model="book.projectId">
                   <input class="weui-input" type="number" placeholder="请输入手机号" pattern="[0-9]*"  v-model="book.contactPhone" @input="this.handleCheckContent">
                </div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd">
                   <label class="weui-label">哪些场馆？</label>
                </div>
                <div class="weui-cell__bd">
                   <div class="weui-cells weui-cells_checkbox">
                      <label class="weui-cell weui-check__label"  v-for="option in project.scenicZones">
                        <div class="weui-cell__hd">
                          <input type="checkbox" class="weui-check" :id="option.id" :value="option.scenicId" v-model="book.scenicZonesId">
                          <i class="weui-icon-checked"></i>{{option.scenicZoneName}}
                        </div>
                      </label>
                    </div>
                </div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd">
                  <label class="weui-label">哪天？</label>
                </div>
                <div class="weui-cell__bd">
                  <input class="weui-input" type="date" v-model="book.bookedTime">
                </div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd">
                  <label class="weui-label">多少人？</label>
                </div>
                <div class="weui-cell__bd">
                <input placeholder="限3人以上" class="weui-input" type="number"  v-model="book.bookedNumber">
                </div>
              </div>
              <div class="weui-cell button"><input type="button" class="weui-btn" @click="this.handleSaveBook" value="立即报名" :disabled="this.btnDisabled"></div>
            </div>
        </mt-popup>
      </div>
    <!-- TODO：手机号码验证提示信息-->
    <div class="pages-popup">
            <mt-popup
               v-model="errMsgVisible"
               popup-transition="popup-fade"
               class="popup-errMsg">
                <div class="weui-cells">
                  <div class="weui-cells__title" >错误</div>
                   <div class="weui-cell errMsg">{{this.errMsg}}</div>
                   <div class="weui-cell button"><input type="button" class="weui-btn" @click="this.handleHiddenErrMsg" value="确定"></div>
                </div>
            </mt-popup>
        </div>
       <!-- TODO：报名成功提示 -->
    <div class="pages-popup">
       <mt-popup
          v-model="popupVisible"
          popup-transition="popup-fade"
          position="top"
          class="popup-save">
          <p>报名成功</p>
       </mt-popup>
    </div>
</div>
</template>
<script>
  import fetch from '../../utils/fetch'
  import MtCell from "../../../node_modules/mint-ui/packages/cell/src/cell";
  import MtButton from "../../../node_modules/mint-ui/packages/button/src/button";
  import MtPopup from "../../../node_modules/mint-ui/packages/popup/src/popup";
  export default{
    data (){
      return {
        selected: '1',
        book: {
          'projectId':'',
          'contactName':'',
          'contactPhone':'',
          'bookedNumber':3,
          'bookedTime':'',
          scenicZonesId:[],
          zoneList:[]
        },
         project: {
            'id':'',
            'projectName': '',
            'displayImgUrl': require('../../assets/header.jpg'),
            'projectStartTime':'',
            'projectEndTime':'',
            'projectDesc':'',
            'limitNumber':'',
            'introImages':[
              {
                'introImageUrl':require('../../assets/detail-img-1.jpg'),
                'order':'',
                'active':false,
                'error':false
              }
            ],
            'scenicZones': []
         },
         scenicOptions: [],
         currentClass: 'cb',
         sheetVisible: false,
         errMsgVisible: false,
         popupVisible: false,
         btnDisabled: true,
         errMsg:'',
         bookedUserList:[],
         pageReq:{
          count:'',
          page:'',
          projectId: ''
        },
      }
    },
    components:{
      MtButton,
      MtCell,
      MtPopup
    },
    created(){
      this.handleGetProject();
      this.handleGetScenicOptions();
    },
    computed:{
    },
    methods:{
      handleGetProject(){
        let touristId = this.$route.params.touristId
        fetch('/api/project/info/' +touristId ).then(response =>{
          if(response.data.success) {
            this.project = response.data.response
            this.handleGetProjectBookedUser(this.project.id);
          }
        });
      },
      handleGetScenicOptions(){
        this.project.scenicZones = [];
        this.scenicOptions = [];
        this.pageReq.count = 999;
        this.pageReq.page = 0;
        this.pageReq.type = 1;
        let formData = JSON.stringify(this.pageReq)
        fetch.post('/api/scenic/list',formData).then(response =>{
          if(response.data.success){
            var i;
            for(i = 0; i < response.data.response.length; i++){
              let optionItem = new Object();
              optionItem.scenicId = response.data.response[i].id;
              optionItem.scenicZoneName = response.data.response[i].scenicZoneName;
              optionItem.scenicRemark= response.data.response[i].remark;
              this.scenicOptions.push(optionItem);

            }
          }
        })
      },
      handleGetProjectBookedUser(projectId){
        this.pageReq.count = 5;
        this.pageReq.page = 0;
        this.pageReq.projectId = projectId;

        let formData = JSON.stringify(this.pageReq);

        fetch.post('/api/project/booked/list' ,formData).then(response =>{
          if(response.data.success) {
            this.bookedUserList = response.data.response
          }
        })
      },
      handleTakePartIn() {
        this.sheetVisible = true;
        this.book.projectId = this.project.id;
        this.book.zoneList = [];
      },
      handleTakePartOut() {
        this.sheetVisible = false;
      },
      handleCheckPhone(){
         let reg=/^1[34578]\d{9}$/;
         let phoneNumber = this.book.contactPhone;
         if(phoneNumber.length < 1){
            return false;
         }else{
           if(reg.test(phoneNumber)){
             return true;
           }else{
              return false;
           }
         }
      },
      handleCheckContent(){
         if(this.book.contactName.length > 0 && this.book.contactPhone.length > 0){
            this.btnDisabled = false;
         }else{
            this.btnDisabled = true;
         }
      },
      //预定保存
      handleSaveBook(){
        var i;
        var j;
        this.book.zoneList = [];
        for(i=0;i<this.book.scenicZonesId.length;i++){
          for(j=0;j<this.scenicOptions.length;j++){
            if(this.book.scenicZonesId[i] == this.scenicOptions[j].scenicId){
               let bookedItem = new Object();
                bookedItem.zoneId = this.scenicOptions[j].scenicId;
                bookedItem.zoneName = this.scenicOptions[j].scenicZoneName;
                bookedItem.remark= this.scenicOptions[j].scenicRemark;
                this.book.zoneList.push(bookedItem);
                break;
            }
          }
        }
        let formData = JSON.stringify(this.book);
        if(this.handleCheckPhone()){
          fetch.post('/api/project/booked/save',formData).then(response =>{
             if(response.data.success){
               this.sheetVisible = false;
               this.popupVisible = true;
             }else{
               this.errMsg = response.data.msg
               this.errMsgVisible = true;
             }
          })
        }else{
            this.errMsg = '你输入的是一个无效的手机号码';
            this.errMsgVisible = true;
        }
      },
      handleHiddenErrMsg(){
        this.errMsgVisible = false;
      },

    },

    deactivated () {
      this.$destroy()
    }
  }
</script>
<style scoped lang="scss">
  @import '../../../static/css/weui.css';
  @import '../../base/css/_base';
  @import '../../../node_modules/mint-ui/lib/style.css';
  .mint-navbar{
    margin: 0 0 10px;
  }
  .container{
    background-color: #fff;
    height: 100%;
    .mint-header{
      font-size: 16px;
      height: 45px;
      line-height: 45px;
      background-color: #f2f2f2 !important;
      box-sizing: border-box;
      color: #101010;
    }
    .detail_post{
       height: 216px;
       width: 100%;
       margin-top: 45px;
    }
    .detail_post img{
        height: 216px;
        width: 100%;
    }
     .detail_title{
       width:100%;
       padding: 11px 18px;
       box-sizing: border-box;
     }
     .detail_title p{
       font-size:18px;
       color: #101010;
       padding: 5px 0;
     }
     .border-bottom{
       background-image: -webkit-linear-gradient(bottom, #e5e5e5, #e5e5e5 50%, transparent 50%);
       background-size: 100% 1px;
       background-repeat: no-repeat;
       background-position: bottom;
     }
     .detail_summary{
        padding: 0;
        word-break: break-word;
        .detail_summary_desciption{
         color:#030303;
         letter-spacing:-1px;
         .weui-cells__title{
            padding: 0;
         }
         .detail-zone-remark{
            border: 1px dashed #030303;
            font-size: 12px;
            padding: 5px 22px;
            white-space: pre-wrap;
            word-wrap: break-word;
            width: 100%;
         }
          .weui-cells:after,.weui-cell:before{
            border:0 ;
           background: none !important;
           border-top: 0 !important;
           border-bottom: 0 !important;
         }
         .weui-cells.weui-cells_checkbox::before{
            border-top: 0;
         }
         .weui-cells_checkbox {
            margin-top :0 ;
            label{
              >div{
                font-size: 14px;
                color: #030303;

              }
            }
           .weui-check:checked + .weui-icon-checked[data-v-2a1a5d12]::before {
               color: #F15F5C;
           }
           .weui-cell{
              padding: 0 22px;
              .weui-icon-checked::before{
                  margin: 0;
              }
           }
           .weui-cell::before{
              border-top: 0;
           }
         }
         pre{
            padding: 5px 18px;
         }
       }
     }
     .detail_summary_item,.detail_summary_desciption{
       padding: 9px 18px;
       line-height: 20px;
     }
     .detail_images{
        padding-bottom: 50px;
        height: auto;
     }
     .detail_images img{
       width: 100%;
       height: auto;
       padding-top: 10px;
     }
     .tourist_signup{
       position: fixed;
       bottom: 0;
       height: 50px;
       width: 100%;
       .weui-btn{
            background-color: #F15F5C;
            border-radius: 0;
            color: #ffffff;
            line-height:50px;
       }
     }
      .detail_title{
          padding-left: 15px;
          padding-right: 15px;
      }
      .detail_title,.detail_summary{
         line-height: 18px;
      }
      .detail-time,.detail-number,.detail-zone,.detail-zone-name{
         width: 22px;
         height: 22px;
         display: inline-block;
         vertical-align: bottom;
         background-position: center;
         background-color: #fff;
         background-repeat: no-repeat;
         background-size: 90%;
      }
       .detail-time{
          background-image: url(../../../static/images/detail-time.png);
       }
       .detail-number{
          background-image: url(../../../static/images/detail-number.png);
       }
       .detail-zone{
          background-image: url(../../../static/images/detail-zone.png);
       }
       .detail-zone-name{
          background-image: url(../../../static/images/detail-zone-name.png);
       }
     .signup_sec{

     }
     .detail_summary_item .fa,.detail_summary_desciption .fa{
       padding-right: 10px;
       color: #858585;
       font-size: 20px;
     }
     .pages-popup{
       .popup-takepart{
         width: 100%;
         height: auto;
         background-color: rgba(0,0,0,.7);
         -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
         .weui-cells{
            margin: 0;
            .weui-cells__title{
              text-align: left;
              margin: 0;
            }
            .weui-cell{
              .mint-back{
                  width: 100%;
                  height: 100%;
                  text-align: left;
              }
              .weui-btn{
                  line-height: 50px;
                  width: 100%;
                  background-color: #F15F5C;
                  border-radius: 0;
              }
              .weui-btn[disabled="disabled"]{
                  opacity: 0.6;
              }
              label.weui-label{
                color: #101010;
              }
            }
            .weui-cell.back-btn{
                padding: 10px 5px !important;
            }
            .weui-cell.button{
                width: 100%;
                padding: 0;
                height: 50px;
            }
         }
         .weui-cells_checkbox{
             position: relative;
             display: -webkit-box;
             display: -webkit-flex;
             display: flex;
             -webkit-box-align: center;
             -webkit-align-items: center;
             align-items: center;
             flex-direction: row;
             flex-wrap: wrap;
             .weui-icon-checked:before{
                margin-left:0;
             }
             .weui-cell{
                padding: 0!important;
                .weui-cell__hd{
                  color: #101010;
                }
             }

         }
         .weui-cells_checkbox:before, .weui-cells_checkbox .weui-cell:before{
           border:0 ;
           background: none !important;
           border-top: 0 !important;
           border-bottom: 0 !important;
         }
         .weui-cells:first-child{
            border: 0 !important;
         }
         .weui-cells:after{
             border: 0 !important;
         }
         p{
           line-height: 50px;
           color: #fff;
           font-size:16px;
         }
     }
     .popup-errMsg{
        z-index: 3000;
        width: 100%;
        height: auto;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.7);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        padding: 20px;
        box-sizing: border-box;
       .weui-cells{
          margin-top: 0;
          border-radius:5px;
          .weui-cell{
               .weui-btn {
                 width: 100%;
                 color: #0B2161;
                 font-size: 14px;
               }
             }
             .weui-cell.errMsg{
               display: block;
                font-size: 14px;
                color: #bbb;
                box-sizing: border-box;
                text-align: center;
             }
             .weui-cell:before,.weui-cells__title:before{
               border-top: 0;
             }
             .weui-cell.button{
               padding:0 !important;
             }
             .weui-cells__title{
                 color: #101010;
             }
          }
          .weui-cells:before{
            border-top:0 !important;

          }
     }
      .popup-save{
        width: 100%;
        height: 45px;
        text-align: center;
        background-color: rgba(0,0,0,.4);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        p{
          line-height: 45px;
          color: #fff;
          font-size:16px;
        }
      }
   }
     a:link{text-decoration:none;}
     a:visited{text-decoration:none;}
     a:hover{text-decoration:none;}
     a:active{text-decoration:none;}
     .eclipse{
       display: -webkit-box;
       text-overflow:ellipsis;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 1;
       overflow: hidden;
       line-height: 1.2;
     }
  }

</style>
